<template>
	<view class="second-search">
		<!-- 头部导航 -->
		<view class="second-header">
			<view class="second-header-v">
				<image @click="backClick" class="test1" src="../../static/search-img/左箭头.png"></image>
				<text>搜索"{{ this.searInput }}"相关的商品</text>
				<image class="test1" src="../../static/home/conent/列表选择.png"></image>
			</view>
		</view>
		<!-- 输入框 -->
		<view class="second-seaer-input">
			<input type="text" v-model="searInput" placeholder="输入关键词搜索优惠券商品..." />
			<image @click="searchInputEvent" src="../../static/home/conent/搜索.png"></image>
		</view>
		<!-- tabs组件 -->
		<view class="second-seaer-tabs"><mstabs :tabData="testData" @tabClick="aplayModuler"></mstabs></view>

		<!-- 商品组件 -->
		<view class="index-showimte"><goodsitem :goodesList="goodesList"  :isInfoShow="true"></goodsitem></view>

		<!-- tabbar组件 -->
		<view class="second-seaer-tabbar"><tab-bar tabIndex="8" :tabListParent="tabbarDeploy"></tab-bar></view>
		<!-- 点击向上组件 -->
		<view><click-up v-show="isTopEvent"></click-up></view>
		<!-- 粘性布局中的搜索组件 -->
		<view><goode-search v-show="isTopEvent"></goode-search></view>
	</view>
</template>

<script>
// 引入组件 tabs组件
import mstabs from '../../components/liuyuno-tabs/liuyuno-tabs.vue';

//引入goodsitem组件
import goodsitem from '../../components/goods-item/goodsItem.vue';

import clickUp from '../../components/click-up/click-up.vue';

// 引入搜索组件
import goodeSearch from '../../components/goods-search/itemSearch.vue';

//vuex映射
import { mapState, mapActions, mapMutations } from 'vuex';

//引入tabbar组件
import tabBar from '../../components/wyg-bottom-tab/wyg-bottom-tab.vue';
export default {
	data() {
		return {
			//tabs
			testData: ['默认排序', '优惠券', '销量', '价格'],
			//第几个标签
			active: 0,
			tabbarDeploy: [
				{ id: 0, name: '首页', imgOff: '../../static/home/tab-home.png', imgOn: '../../static/home/tab-home-current.png', url: '/pages/index/index' },
				{ id: 1, name: '查找优惠卷', imgOff: '../../static/home/tab-search.png', imgOn: '../../static/home/tab-home-current.png', url: '/pages/search/search' },
				{ id: 2, name: '9.9包邮', imgOff: '../../static/home/tab-exemption.png', imgOn: '../../static/home/tab-home-current.png', url: '/pages/exemption/exemption' },
				{ id: 3, name: '今日疯抢榜', imgOff: '../../static/home/tab-ranking.png', imgOn: '../../static/home/tab-home-current.png', url: '/pages/ranking/ranking' },
				{ id: 4, name: '下载APP', imgOff: '../../static/home/tab-download.png', imgOn: '../../static/home/tab-home-current.png', url: '/pages/download/download' }
			],
			//当前搜索内容
			searInput: '',
			//是否为顶部
			isTopEvent: false
		};
	},
	//监听页面级滚动
	onPageScroll(v) {
		if (v.scrollTop > 600) {
			this.isTopEvent = true;
		} else {
			this.isTopEvent = false;
		}
	},
	components: {
		mstabs,
		tabBar,
		goodsitem,
		goodeSearch,
		clickUp
	},
	computed: {
		...mapState({
			goodesList: state => state.search_idx.search_itemList
		})
	},
	onLoad: function(options) {
		this.searInput = options.searInput;

		// //发送请求拿到搜索列表中的数组
		this.reqSearchItemList({ kw: this.searInput, active: 0 }).then(data => {
			console.log(data);
		});
	},
	methods: {
		...mapActions(['reqSearchItemList', 'reqSearchItemLoadMore']),
		aplayModuler(v) {
			this.active = v;
			this.reqSearchItemList({ kw: this.searInput, active: this.active }).then(data => {
				console.log(data);
			});
		},
		searchInputEvent() {
			this.reqSearchItemList({ kw: this.searInput, active: this.active }).then(data => {
				console.log(data);
			});
		},
		// 返回按钮
		backClick() {
			uni.navigateBack({
				delta: 1,
				animationType: 'pop-out',
				animationDuration: 200		
			});
		}
	},
	//触发到底部事件
	onReachBottom() {
		console.log('到底部了');

		this.reqSearchItemLoadMore({ kw: this.searInput, active: this.active }).then(data => {
			console.log(data);
		});
	}
};
</script>

<style scoped lang="scss">
.second-search {
	width: 100vw;
	height: calc(100vh - 50px);
	background-color: #ffffff;
	// 头部导航
	.second-header {
		background: linear-gradient(138deg, #f40497, #f81131);
		width: 100%;
		.second-header-v {
			margin: 0 auto;
			width: 90%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;
			font-size: 35upx;
			color: #ffffff;
			height: 46px;
			image {
				width: 57upx;
				height: 57upx;
			}
			text {
				width: 80%;
			}
		}
	}

	// 搜索输入框
	.second-seaer-input {
		width: 100%;
		height: 84upx;
		border: 2upx #f40497 solid;
		box-sizing: border-box;
		position: relative;
		border-radius: 10upx;
		background-color: #ffffff;
		input {
			display: flex;
			align-items: center;
			width: 90%;
			height: 100%;
			margin-left: 5%;
			font-size: 30upx;
		}
		image {
			position: absolute;
			width: 45upx;
			height: 45upx;
			top: 25%;
			right: 30upx;
		}
	}

	//tabs
	.second-seaer-tabs {
		margin-top: 20upx;
	}

	.index-showimte {
		width: 100vw;
		background-color: #ffffff;
	}
}
</style>
